<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插值语法</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
    </head>
    <body>
        <div id="app">
            <p>FirstName: 
                <input type="text" v-model="firstName"></input>
            </p>
            <p>LastName:
                <input type="text" v-model="lastName"></input>
            </p>
            <p>FullName::
                <input type="text" v-model="fullName"></input>
            </p>
        </div>
        <script>
            const { createApp } = Vue
            // 模板中的变量读取数据的来源都是配置指定的data对象。
            createApp({
                data() {
                    return {
                        firstName: 'Yange',
                        lastName: 'Liang'
                    }
                },
                
                computed: {
                    fullName: {
                        // 应该如何设置计算属性值呢？答案是：可以通过同时提供getter和setter的计算属性来实现。
                        get() {
                            return this.firstName + ' ' + this.lastName
                        },
                        set(value) {
                            const names = value.split(' ')
                            this.firstName = names[0]
                            this.lastName = names[1]
                        }
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>